import React, { PureComponent } from 'react'
import { View, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
import { convertPx } from '@UTILS/common'
import { dataType } from '@pier88health/p8h-common'
import './index.scss'

export default class TabView extends PureComponent {
  static getDerivedStateFromProps(nextProps, prevState) {
    const { activeIndex } = nextProps
    if (activeIndex !== prevState.activeIndex) {
      return {
        activeIndex,
        scrollIntoView: `item-${activeIndex ? activeIndex - 1 : 0}`
      }
    }
    return null
  }

  constructor(props) {
    super(props)
    const { activeIndex = 0 } = props
    this.state = {
      activeIndex,
      scrollIntoView: undefined
    }
  }

  onClickItem = (index, item) => {
    const { onTabChange } = this.props
    onTabChange?.(index, item)
    this.setState({
      activeIndex: index,
      scrollIntoView: `item-${index ? index - 1 : 0}`
    })
  }

  onSwipeChange = e => {
    const { onTabChange, tabs } = this.props
    const index = e.detail.current
    this.setState({
      activeIndex: index,
      scrollIntoView: `item-${index ? index - 1 : 0}`
    })
    onTabChange?.(index, tabs[index])
  }

  render() {
    const { activeIndex, scrollIntoView } = this.state
    const {
      tabs, children, tabViewHeight, subTabView, className
    } = this.props
    return (
      <View className={`tabViewContainer ${className}`}>
        <ScrollView
          scrollX
          scrollWithAnimation
          className="tabViewScroll"
          scrollIntoView={scrollIntoView}
          showScrollbar={false}
        >
          <View className="tabView">
            {tabs.map((item, index) => {
              const isObj = dataType.isObject(item)
              let text = item
              let isShowDot = false
              if (isObj) {
                text = item.title
                isShowDot = item.isShowDot
              }
              return (
                <View
                  id={`item-${index}`}
                  key={`${item}${index}`}
                  onClick={() => { this.onClickItem(index, item) }}
                  className={`tab-item ${index === activeIndex ? 'active' : ''}`}
                >
                  <View className="tab-item-text">
                    {text}
                    {isShowDot && <View className="tab-item-dot" />}
                  </View>
                  {activeIndex === index && (<View className="tab-indicate" />)}
                </View>
              )
            })}
          </View>
        </ScrollView>
        {subTabView}
        {Array.isArray(children) ? (
          <Swiper
            duration={300}
            current={activeIndex}
            easingFunction="linear"
            onChange={this.onSwipeChange}
            onTransition={this.onTransition}
            style={{ height: convertPx(tabViewHeight) }}
          >
            {children.map((child, index) => (child ? <SwiperItem key={index}>{child}</SwiperItem> : null))}
          </Swiper>
        ) : children}
      </View>
    )
  }
}
